<!--
 * @Description:Form组件,jsonSchame
 * @Version: 2.0
 * @Autor: kafei
 * @Date: 2021-11-29 11:38:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-23 11:45:30
-->
<template>
  <div class="Form">
    <el-form
      ref="form"
      :model="form"
      size="small"
      :label-width="formConfig.labelWidth || '80px'"
      :rules="rules"
      v-bind="formConfig"
    >
      <el-row :gutter="20">
        <el-col
          v-for="item in itemData"
          :key="item.props"
          :span="item.span||24"
          label=""
        >
          <template v-if="item.show">
            <el-form-item
              :prop="item.props"
              :label="item.label"
            >
              <component
                :is="item.type"
                v-model="form[item.props]"
                v-bind="item.config"
                @change="changeFun(item.props,form[item.props])"
              />
            </el-form-item>
          </template>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

import elSelectOptions from '@/components/elSelectOptions/index.vue'
import treeDialog from '@/components/treeDialog/index.vue'
import { cloneDeep } from 'lodash'
export default {
  name: 'KaForm',
  components: {
    elSelectOptions,
    treeDialog
  },
  props: {
    itemData: { // 列表元素
      type: Array,
      default: () => {
        return []
      }
    },
    rules: { // 规则
      type: Object,
      default: () => {
        return {}
      }
    },
    value: {
      type: Object,
      default: () => {
        return {}
      }
    },
    formConfig: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      form: {},
      defaultForm: {}
    }
  },
  watch: {
    value (nVal) {
      console.log(nVal, 'nValnValnVal')
      this.initForm(nVal)
    }
  },
  created () {
    this.initForm(this.value)
  },
  methods: {
    changeFun (prop, value) {
      // console.log(this.form, 'asd')
      console.log(this.form, 'this.form')
      this.$emit('input', this.form)
      this.$emit('change', { prop, value })
    },
    validator () {
      let access = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          access = true
        } else {
          access = false
        }
      })
      return access
    },
    clearValidate (result) {
      this.$nextTick(() => {
        this.$refs.form.clearValidate(result)
      })
    },
    initForm (formData) {
      this.setItemShow(this.itemData)
      if (Object.keys(formData).length === 0) {
        for (const key in this.form) {
          this.$set(this.form, key, '')
        }
      } else {
        for (const key in formData) {
          this.$set(this.form, key, formData[key] === 0 ? '0' : formData[key] || '')
        }
      }
      console.log(this.form, 'this.form')
      this.defaultForm = cloneDeep(formData)
      this.$nextTick(() => {
        const targetKeys = this.itemData.map(v => v.props)
        this.clearValidate(targetKeys)
      })
    },
    setItemShow (data) {
      data.forEach(v => {
        if (!Object.prototype.hasOwnProperty.call(v, 'show')) {
          this.$set(v, 'show', true)
        }
      })
    },
    onSubmit () {
      console.log('submit!')
    },
    resetForm () {
      // this.$refs.form.resetFields()
      const targetKeys = this.itemData.map(v => v.props)
      targetKeys.forEach(v => {
        this.$set(this.form, v, this.defaultForm[v])
      })
    }
  }
}
</script>
